<template>
  <div id="main" :style="winStyle" v-if="isInit!==0">
    <!--<div class="el-header" ref="el-header">头部</div>-->
    <!--<div class="el-container" ref="el-container" :style="{height:containerHeight+'px'}">-->
    <!--<div class="el-aside" ref="el-aside">侧边栏</div>-->
    <!--<div class="el-main" ref="el-main">主体</div>-->
    <!--</div>-->
    <el-container
      v-show="CurrUser.IsLogin() && isInit===1"
      ref="el-container"
      :style="{height:containerHeight+'px'}">
      <el-aside ref="el-aside" width="200px">
        <Nav></Nav>
      </el-aside>
      <!--主窗体: 头部,中间部-->
      <el-container>
        <!--头部-->
        <el-header ref="el-header" style="height: 45px;">
          <TopBar class="bcr12 b-ra-4"></TopBar>
        </el-header>
        <!--中间部-->
        <el-main ref="el-main">
          <Main></Main>
        </el-main>
      </el-container>
    </el-container>

    <server-error v-if="isInit===-1"/>

    <router-view
      v-if="CurrUser.IsLogin()===false"
      style="width: 100%;"
      :style="{height:containerHeight+'px'}"></router-view>
    <div class="el-footer" ref="el-footer" v-if="isInit===1">
      <div class="copyright">
        {{ companyName }} 2010~2019 &nbsp;|&nbsp; 当前版本: <b class="red" v-text="AppVersion"></b>
      </div>
    </div>
    <my-socket v-if="isInit===1"/>
    <product-choose-model-dialog v-if="isInit===1"/>
    <choose-address-dialog v-if="isInit===1"/>
    <my-slider-captcha v-if="isInit===1"/>
  </div>
  <!--计算浏览器尺寸-->
</template>
<script>
  import Nav from './components/Common/Nav'
  import Main from './components/Common/Main'
  import TopBar from './components/Common/TopBar'
  import './assets/css/custom.css'
  import './assets/css/special_effects.css'
  import Vue from 'vue'
  import MySocket from './components/Common/MySocket'
  import ProductChooseModelDialog from './components/Dialog/ProductChooseModelDialog'
  import ChooseAddressDialog from './components/Dialog/ChooseAddressDialog'
  import MySliderCaptcha from './components/Common/MySliderCaptcha'
  import ServerError from './components/Common/ServerError'
  import SignUtil from './components/Tools/SignUtil'
  // 窗体-最小尺寸限制
  const minSize = {
    width: 1024,
    height: 768
  }
  const minContainerHeight = 700
  export default {
    name: 'App',
    beforeMount: function () {
      if (!this.CurrUser.IsLogin() && this.$route.name!=='Login') {
        this.$router.push('Login')
      }
    },
    mounted: function () {
      this.preInit(() => {
        this.init()
      })

      this.winStyle.height=document.getElementById('fixed-box').offsetHeight+'px'
      this.winStyle.width=document.getElementById('fixed-box').offsetWidth+'px'
      this.containerHeight=document.getElementById('fixed-box').offsetHeight-40
      this.$forceUpdate()
    },
    components: {
      ServerError,
      MySliderCaptcha,
      ChooseAddressDialog,
      ProductChooseModelDialog,
      MySocket,
      Nav,
      TopBar,
      Main
    },
    data: function () {
      return {
        AppVersion: window.AppVersion,
        isInit:0,
        currNotityMap:{},
        // 默认高度
        winStyle: {
          width: minSize.width + 'px',
          height: minSize.height + 'px'
        },
        // 内容区域最小高度
        containerHeight: minContainerHeight
      }
    },
    methods: {
      removeLoading: function () {
        this.winStyle.opacity = 1
        document.getElementById('main-page-loading').remove()
        this.$forceUpdate()
        // console.log('this.removeLoading()')
      },
      preInit: function (callback) {
        this.$http.post(this.ApiDoNameCommon + 'Public/wo1mzi2dc4i9mnfbx5po', {}, {}).then((response) => {
          if (response.ok) {
            this.isInit = 1
            SignUtil.setConfig(response.body)
            typeof callback === 'function' ? callback() : ''
          } else {
            this.removeLoading()
            this.isInit = -1
          }
          this.$forceUpdate()
        }, () => {
          this.removeLoading()
          this.isInit = -1
          this.$forceUpdate()
        })
      },
      init:function () {
        setTimeout(()=>{
          this.calcSize()
        },500)
        var $this = this
        window.onresize = function () {
          $this.calcSize()
          $this.bus.$emit('ReCalcWinSizeBusCall')
        }
        this.bus.$on('UserStatusUpdate', function () {
          $this.$forceUpdate()
        })
        document.title='『'+Vue.prototype.companyName+'』后台管理系统'

        $this.bus.$on('ShowMessageProductCallBus',function (type,id) {
          // if (type==='ShopProduct'){
          //   $this.$router.push('/ProductStockPage?id='+id)
          // }
          if (type==='SupplierProduct'){
            $this.$router.push('/ProductStockPage?id=' + id)
          }
        })
        this.setNotify()
      },
      setNotify:function () {
        let $this=this
        // setTimeout(function () {
        //   $this.bus.$emit('NewOrderMessage', {
        //     message: '{"id":28,"content":"北欧貂绒绒感窗帘布×1支付金额: 40.00元"}',
        //     eventType: 'NewOrderApply'
        //   })
        // }, 1000)

        this.bus.$on('OpenOrderMessageCallBus', function (params) {
          if ($this.currNotityMap[params] && typeof ($this.currNotityMap[params].close) === 'function') {
            $this.currNotityMap[params].close()
          }
        })

        // 新订单消息
        this.bus.$on('NewOrderMessage', function (data) {
          console.log('data', data)
          var eventTypeMap = {
            NewOrder: '【新订单】消息',
            NewOrderApply: '【新退货单】消息',
          }

          // var currUrl=$this.$route.fullPath


          // console.log('$this.$route',$this.$route)

          data.message = JSON.parse(data.message)
          var currUrl = ''
          if ($this.$route.path.indexOf('?') === -1) {
            currUrl = '/#' + data.eventType.replace("New", "") + 'Page?time=' + Math.random() + '&eventType=' + data.eventType + '_EVENT&EVENT_PARAMS=' + data.message.id
          } else {
            var _queryParams = {
              time: Math.random(),
              eventType: data.eventType + '_EVENT',
              EVENT_PARAMS: data.message.id
            }
            // $this.$router.push({
            //   path:$this.$route.path,
            //   query:Object.assign($this.$route.query,_queryParams)
            // })
            // console.log('_queryParams',_queryParams)
            currUrl = '/#' + $this.$route.path + '?' + $this.mapToHttpQuery(_queryParams)
          }
          var tmpType = data.eventType.replace("New", "");
          currUrl = '/#/Supplier' + tmpType + "Page?status=0&time=" + Math.random() + '&EVENT_PARAMS=' + data.message.id;
          $this.currNotityMap[tmpType+ '_' + data.message.id] = $this.$notify({
            title: eventTypeMap[data.eventType],
            message: data.message.content + '<a href="' + currUrl + '">点击查看</a>',
            position: 'bottom-right',
            dangerouslyUseHTMLString: true,
            type: 'success',
            duration: 0
          })
        })
      },
      // 主窗体-计算尺寸
      calcSize: function () {
        var winWidth = document.getElementById('fixed-box').offsetWidth
        var winHeight = document.getElementById('fixed-box').offsetHeight
        this.winStyle.width = (winWidth < minSize.width ? minSize.width : winWidth) + 'px'
        this.winStyle.height = (winHeight < minSize.height ? minSize.height : winHeight) + 'px'
        // this.containerHeight = winHeight - this.$refs['el-header'].offsetHeight - this.$refs['el-footer'].offsetHeight
        this.containerHeight = winHeight - this.$refs['el-footer'].offsetHeight
        // 内容区域最小高度
        if (this.containerHeight < minContainerHeight) {
          this.containerHeight = minContainerHeight
        }
        this.$forceUpdate()
      }
    }
  }
</script>
<style>
  @import "https://at.alicdn.com/t/c/font_3589419_pij0cm0iag.css?spm=a313x.7781069.1998910419.53&file=font_3589419_pij0cm0iag.css";
</style>
